Cloudflare Streamで提供されている動画プレイヤーや再生方法を確認してみた

Cloudflare Streamで提供されている動画プレイヤーや再生方法を確認してみた

Cloudflare Streamでは「Stream Player」と呼ばれる動画プレイヤーも提供されています。このStream Playerのカスタマイズ方法や、独自の動画プレイヤーを使う際のマニフェストURLなどについてまとめてみます。
#Cloudflare Stream
#Cloudflare
清水俊也

清水俊也

facebook logohatena logotwitter logo
Clock Icon2022.06.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。Cloudflareの動画配信プラットフォームのサービスCloudflare Streamを試しています。本エントリではCloudflare Streamで提供されている動画再生方法について確認してみたのでまとめてみたいと思います。Cloudflare Streamでは「Stream Player」と呼ばれる動画プレイヤーが提供されています。プレイヤーのサイズや動画再生方法などいろいろなカスタマイズが可能です。また独自の動画プレイヤーを利用するためのHLS・DASHのマニフェストURLも利用可能となっています。

Stream Playerの利用

Stream Playerのベースとなる使い方

まずはCloudflare Streamで提供されているStream Playerについておさえておきましょう。アップロードした動画に対してユニークなID（ビデオID/Video ID、以降コード中では$VIDEOIDとします）が発行されます。このビデオIDをもとに以下の形式のiframe要素をWebページ配置することで、Cloudflare側がホスティングしているプレイヤーとともに、実際の動画が再生できるようになります。（ライブストリーミングの場合の注意点は本エントリ後半の「ライブストリーミングの場合の注意点」の項目で述べます。）

<iframe
  src="https://iframe.videodelivery.net/$VIDEOID"
  style="border: none"
  height="720"
  width="1280"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

以下、実際に組み込んでみた例です。（と言っても、最低限のHTML要素を追加しただけですが。）

<html>
  <head>
    <title>Stream Player</title>
  </head>
  <body>
    <iframe
       src="https://iframe.videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
       style="border: none"
       height="720"
       width="1280"
       allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
       allowfullscreen="true"
       ></iframe>
  </body>
</html>

ページを開くと再生マークが表示されます。クリックすることで再生がはじまります。

Stream Playerのカスタマイズ

iframe要素の属性を変更することでカスタマイズが可能です。詳細については以下ドキュメントにまとめられていますが、いくつか確認してみましょう。

Playerサイズの変更

iframe要素のheight/width属性を変更することで、プレイヤーのサイズを調整することができます。また以下のようにstyle属性でposition: absolute; top: 0; height: 100%; width: 100%を設定する、などすると（iframe要素のほかdiv要素も追加しています）実際のブラウザサイズにあわせつつ、16:9のアスペクト比を維持したレスポンシブなプレイヤーサイズとなります。（ブラウザサイズを縦長にすると下部に余白ができ、横長にするとスクロールバーが必要になります。ブラウザサイズと動画の横幅を合わせるかたちのようです。）

<html>
  <head>
    <title>Stream Player</title>
  </head>
  <body>
    <div style="position: relative; padding-top: 56.25%">

      <iframe
         src="https://iframe.videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
         style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
         allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
         allowfullscreen="true"
         ></iframe>
    </div>
  </body>
</html>

そのほかパラメータによるカスタマイズ

Playerサイズのほか、再生方法などについてもカスタマイズ可能です。これらはiframeのsrc属性にクエリ文字列パラメータとして設定します。以下にカスタマイズ可能なパラメータのいくつかをまとめてみたいと思います。（すべてのパラメータについてはドキュメントを参照ください。）

  • autoplay
    • 自動再生のパラメータです。デフォルトはfalseとなっていますが、autoplay=trueのクエリ文字列パラメータを付与することで自動再生が有効になります。
  • controls
    • プレイヤーのコントロール（再生・停止のボタン、シークバー、音量調整など）の表示を制御します。デフォルトはtrueで有効な状態です。falseで無効にする場合はautoplayと組み合わせるとよいかと思います。
  • loop
    • 動画をループさせるパラメータです。デフォルトはfalseで無効の状態ですが、trueとするとループ再生が有効になります。
  • muted
    • ミュートを有効にするパラメータです。デフォルトはfalseで再生がはじまればそれに応じた音声が再生されます。trueに設定することでミュートにして再生させることが可能です。
  • startTime
    • 再生を開始する時刻を指定することができます。例えば20分の動画で最初から5分の箇所から再生を始める、という具合です。startTime=300と秒で指定する他、startTime=5mとhour(h)/minutes(m)/seconds(s)で指定することも可能です。

これらパラメータについては、ダッシュボードからも設定することができます。動画の詳細ページに進み、「埋め込み」タブを確認してみましょう。

Player APIを使ったカスタマイズ

再生方法について、iframeのsrc属性にクエリ文字列パラメータで指定する方法を紹介しました。その他にも、Player APIを用いて、つまりHTML中のJavaScriptの制御によって、再生方法など各種プレイヤーのカスタマイズが可能です。こちらも詳細はドキュメントを確認しましょう。

Using the player API · Cloudflare Stream docs

以下はドキュメント記載の例を少しカスタマイズしたものです。ミュート、ループ再生、自動再生を有効にしてコントロールを無効にするのをPlayer API（JavaScript側）で設定しています。

<html>
  <head>
    <title>Stream Player</title>
  </head>
  <body>
    <div style="position: relative; padding-top: 56.25%">
      <iframe
         src="https://iframe.videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
         style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
         allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
         allowfullscreen="true"
         id="stream-player"
         ></iframe>
    </div>
    <script src="https://embed.videodelivery.net/embed/sdk.latest.js"></script>
    <script>
      const player = Stream(document.getElementById('stream-player'));
      player.addEventListener('play', () => {
        console.log('playing!');
      });
      player.play().catch(() => {
        console.log('playback failed, muting to try again');
          player.muted = true;
          player.loop = true;
          player.autoplay = true;
          player.controls = false;
          player.play();
      });
    </script>
  </body>
</html>

iframe用ドメインの直接参照とPreview用プレイヤー

Stream Playerの使い方やカスタマイズ方法を確認してきました。ところで、このiframeで埋め込む先のURL（つまりiframeのsrc属性）について確認してみましょう。以下の形式のURLですね。

  • https://iframe.videodelivery.net/$VIDEOID

このURLを開くと、該当の動画がブラウザサイズいっぱいに広がり再生可能になります。独自サイトに埋め込む必要がなく、単純に動画を誰かと共有したのであれば、このiframe.videodelivery.netを渡すだけで済みそうな感じですね。

なお、同じように独自サイトを準備せず、videodelivery.netで提供されるプレイヤーにPreview用のものがあります。動画の詳細ページのプレイヤーのした、「ビデオ リンク」のリンクをクリックすると別ウィンドウでこのPreview画面が開きます。

また動画の情報をAPI経由で取得するとpreviewの値としてこのURLが記載されています。URLは以下の形式でした。実際にブラウザでこのページを開いてみます。

  • https://watch.videodelivery.net/$VIDEOID

こちらもiframe.videodelivery.netと同様に、独自サイトに埋め込むなどの必要がなく、単純な動画共有であればそのまま使えそうです。ただしこちらはPreviewと称していることからか、ブラウザウィンドウのサイズを大きくしても動画本体のサイズは大きくならないようでした。またデベロッパーツールで確認したところ、再生する解像度も制限されている（あまり大きな解像度の動画を再生していない）ようです。

Stream Playerでは「JKLキー」のキーボードショートカットが利用可能！

いろいろと多機能なStream Playerですが、個人的に推したい項目の1つがこの「JKLキー」のキーボードショートカットに対応している点です。「JKLキー」のキーボードショートカットは動画編集を行う場合にはおなじみ（かつ必須）であるかと個人的には思っています。また動画再生でも「JKLキー」によるキーボードショートカットに対応しているプレイヤーも多く、例えばYouTubeでは「JKLキー」に対応しています。

個人的に動画プレイヤーに対して無意識に「JKLキー」を使ってしまう癖があるのですが（!?）、Stream Playerはこの「JKLキー」に対応していました。すばらしい！

「JKLキー」によるキーボードショートカット操作は下記になります。またYouTubeで使えるキーボードショートカットと同様、左右矢印キー、スペース、数字キーなどにも役割が割り当てられているようでした。

J K L
<< || or > >>
10秒巻戻し 一時停止・再生 10秒早送り

マニフェストURLを使った独自プレイヤーの利用

Cloudflare StreamではStream Playerが提供されていますが、別途マニフェストのURLも公開されており、これを用いた独自プレイヤーでの動画の再生もサポートしています。

マニフェストURLはHLSおよびDASHが利用可能です。ただし、マニフェストURLを使った再生の場合、ダッシュボードから確認できるStream Analyticsへの情報収集がなされず、再生時間、再生回数などの確認は自前で行う必要があります。またプレイヤー側のエラー対応なども利用者側でハンドリングする必要があります。（逆に言えば、Stream Playerを利用することでこのような視聴時間、回数などの集計、ならびにプレイヤー側のエラーハンドリングなどがCloudflare側に任せられる、ということになります。）

マニフェストURLは以下の形式です。

  • HLS
    • https://cloudflarestream.com/$VIDEOID/manifest/video.m3u8
  • DASH
    • https://cloudflarestream.com/$VIDEOID/manifest/video.mpd

ダッシュボードの動画の詳細ページ、「設定」タブから確認が可能です。

API経由で動画の情報を取得した場合は、playbackの値で確認が可能です。

% curl -X GET \
     -H "Authorization: Bearer ${TOKEN}" \
     "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEO_UID}"
{
  "result": {
    "uid": "c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "creator": null,
    "thumbnail": "https://videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
    "thumbnailTimestampPct": 0,
    "readyToStream": true,
    "status": {
      "state": "ready",
      "pctComplete": "100.000000",
      "errorReasonCode": "",
      "errorReasonText": ""
    },
    "meta": {
      "filename": "IMG_5908.MOV",
      "filetype": "video/quicktime",
      "name": "小田原の海",
      "relativePath": "null",
      "type": "video/quicktime"
    },
    "created": "2022-04-30T09:57:30.832975Z",
    "modified": "2022-04-30T10:04:11.871587Z",
    "size": 382466674,
    "preview": "https://watch.videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "allowedOrigins": [],
    "requireSignedURLs": false,
    "uploaded": "2022-04-30T09:57:30.832929Z",
    "uploadExpiry": "2022-05-01T09:57:30.832922Z",
    "maxSizeBytes": null,
    "maxDurationSeconds": null,
    "duration": 60.9,
    "input": {
      "width": 3840,
      "height": 2160
    },
    "playback": {
      "hls": "https://videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
      "dash": "https://videodelivery.net/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
    },
    "watermark": null
  },
  "success": true,
  "errors": [],
  "messages": []
}

実際にHLSマニフェストURLを使って、VideoJS HTTP Streaming (VHS)で再生してみました。

ライブストリーミングの場合の注意点

Stream PlayerならびにマニフェストURLを使った動画再生方法について確認してきました。ここで、ライブストリーミングの際の注意事項を確認しておきましょう。これまで確認してきたとおり、ビデオIDを用いて再生できる点は変わりません。ただこのビデオIDについては、ライブストリーミングの中断により変わってしまいます。ライブストリーミング中断前後で変わらず動画を再生させたい場合、ビデオIDの部分をライブ入力IDに置き換えたかたちでStream PlayerやマニフェストURLを使用します。以下の形式となります。ですね。（ライブ入力IDをコード中では$LIVEINPUTIDとします。）

  • Stream Player（のiframeのURL）
    • https://iframe.videodelivery.net/$LIVEINPUTID
  • マニフェストURL
    • HLS
      • https://videodelivery.net/$LIVEINPUTID/manifest/video.m3u8
    • DASH
      • https://videodelivery.net/$LIVEINPUTID/manifest/video.mpd

このしくみはドキュメントの以下の箇所に記載があります。

ライブ入力IDに対して、複数のビデオIDが紐づくかたちになります。そして、以下URLにリクエストを行うことで、そのライブ入力IDでライブストリーミング中のビデオID情報が取得可能となっています。

  • https://videodelivery.net/$LIVEINPUTID/lifecycle

以下の形式でライブストリーミング中のビデオID情報が返ります。（以下はドキュメント記載のサンプルです。）

{
      // indicates if the ID provided is for an input or a video
    "isInput": true,
    // returns the active video ID or null for an input ID, otherwise returns the provided video ID
    "videoUID": "55b9b5ce48c3968c6b514c458959d6a",
    // if isInput is true, indicates if the input is actively streaming or not
    "live": true
}

実際に実行した例が下記になります。

% curl https://videodelivery.net/a9fbxxxxxxxxxxxxxxxxxxxxxxxxxxxx/lifecycle
{"isInput":true,"videoUID":"ad44xxxxxxxxxxxxxxxxxxxxxxxxxxxx","live":true,"status":"ready"}

ライブストリーミングを行っていないタイミングでは、ビデオIDはnullとなります。

% curl https://videodelivery.net/a9fbxxxxxxxxxxxxxxxxxxxxxxxxxxxx/lifecycle
{"isInput":true,"videoUID":null,"live":false,"status":"disconnected"}

videodelivery.netドメイン使用についての留意事項

これまで確認してきたように、Stream PlayerやマニフェストURLでは基本的にvideodelivery.netのドメインにアクセスします（iframe.videodelivery.netなど）。このvideodelivery.netですが、特定のローカルIPSからアクセスできないという事象が発生しているようです。CloudflareのダッシュボードでStreamのページを開くと冒頭に情報が表示されます。

videodelivery.netが利用できない場合の回避策としては、上記の通りバックアップドメインcloudflarestream.comを使用する、ということです。Stream Playerを使う場合は以下の形式のURLになります。

  • https://iframe.cloudflarestream.com/$VIDEOID

まとめ

Cloudflare Streamでの動画再生方法、Stream Playerの利用やカスタマイズ、そして独自の動画プレイヤーを利用する際に参照するマニフェストURLなどを確認してみました。いろいろと多機能な（「JKLキー」にも対応している！）プレイヤーが提供されているので、基本的にはこちらを利用しつつ、要件などによってマニフェストURLを参照する独自プレイヤーを利用するかたちになるのかなと思っています。

Share this article

facebook logohatena logotwitter logo

関連記事

Cloudflare StreamのLive Instant Clippingを使ってみた [open beta]

Cloudflare StreamのLive Instant Clippingを使ってみた [open beta]

User avatar
清水俊也
2024.07.31
MediaLive SRT caller inputでCloudflare Streamを入力元に使ってみた

MediaLive SRT caller inputでCloudflare Streamを入力元に使ってみた

User avatar
清水俊也
2024.07.31
Cloudflare Streamで動画のスケジュールによる自動削除が設定できるようになりました

Cloudflare Streamで動画のスケジュールによる自動削除が設定できるようになりました

User avatar
清水俊也
2023.08.31
Cloudflare Streamの動画プレイヤーでEnhancement Propertiesを使ってみた！

Cloudflare Streamの動画プレイヤーでEnhancement Propertiesを使ってみた！

User avatar
清水俊也
2023.06.19
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.